
import React, { useState } from 'react';
import './index.css'
// Sample image generation function
const generateImages = (tabIndex: number) => {
    return Array.from({ length: 100 }, (_, index) =>
        `https://via.placeholder.com/200?text=Tab+${tabIndex}+Image+${index + 1}`
    );
};

const TabSwitcher: React.FC = () => {
    const tabs = [
        "全部", "单页",  "套装", "社群发圈","生活娱乐","商品主题","线下印刷","线下电商",
        "全部",  "文章长图", "小红书配图", "小红书封面",
        "全屏海报","电商竖版海报", "商品主题",  "详情页", "全部","通用","教育培训",
        "金融保险","商品零售", "小红书配图", "公众号次图", "详情页","政务媒体","美容美妆","生活服务",
        "美容美妆","视频","更多"
    ];

    // State to track active tab and images
    const [activeTab, setActiveTab] = useState<number>(0);
    const [images, setImages] = useState<string[]>(generateImages(activeTab));
    const [filter, setFilter] = useState<string>('综合排序');

    const handleTabChange = (index: number) => {
        setActiveTab(index);
        setImages(generateImages(index)); // Update images based on active tab
    };

    const handleFilterChange = (filterType: string) => {
        setFilter(filterType);
        // Sort images based on filter logic (mock logic for demonstration)
        if (filterType === '最多下载') {
            // Mock sorting logic
            setImages(prev => [...prev].sort());
        } else if (filterType === '最新上传') {
            // Mock sorting logic
            setImages(prev => [...prev].sort().reverse());
        } else {
            setImages(generateImages(activeTab)); // Reset to original images
        }
    };

    return (
        <div style={{ textAlign: 'center' }}>
            {/* Tab for text selection */}
            <div className="tab-container">
                {Array.from({ length: 3 }, (_, rowIndex) => (
                    <div key={rowIndex} style={{ margin: '10px 0' }}>
                        {tabs.slice(rowIndex * 10, (rowIndex + 1) * 10).map((tab, index) => (
                            <button
                                key={index}
                                onClick={() => handleTabChange(rowIndex * 10 + index)}
                                style={{
                                    backgroundColor: activeTab === rowIndex * 10 + index ? '#f1f1f1' : '#fff',
                                    color: activeTab === rowIndex * 10 + index ? '#000' : '#000',
                                    padding: '7px',
                                    margin: '3px',
                                    border: 'none',
                                    cursor: 'pointer',
                                    borderRadius:"10px"
                                }}
                            >
                              
                                {tab}
                            </button>
                        ))}
                    </div>
                ))}
            </div>

            {/* Filters for image sorting */}
            <div className="filters" style={{ margin: '20px 0' }}>
                {['综合排序', '最多下载', '最新上传'].map((filterType) => (
                    <button
                        key={filterType}
                        onClick={() => handleFilterChange(filterType)}
                        style={{
                            backgroundColor: filter === filterType ? '#fff' : '#fff',
                            color: filter === filterType ? '#000' : '#888',
                            padding: '10px 20px',
                            margin: '5px',
                            border: 'none',
                            cursor: 'pointer',
                            float:'left',
                           
                        }}
                    >
                        {filterType}
                    </button>
                ))}
            </div>

            {/* Render images based on the selected tab */}
            <div className="image-gallery" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
                {images.map((src, index) => (
                    <div className="image-container" key={index} style={{ margin: '5px' }}>
                        <img src={src} alt={`Image ${index + 1}`} style={{ width: '200px', height: '200px' }} />
                    </div>
                ))}
            </div>
        </div>
    );
};

export default TabSwitcher;
